<template>
    <div class="mass_textingPage flex">
        <div class="friendVue">
            <!-- 帅选部分 -->
            <div class="selectVue">
                <div class="flex_between">
                    <el-select v-model="robotName" placeholder="请选择机器人" style="width: 48%;">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="robotName" placeholder="请选择微信号" style="width: 48%;">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="flex_between margin10">
                    <el-select v-model="replyType" placeholder="是否开启自动回复" style="width: 48%;">
                        <el-option
                            v-for="item in replyTypes"
                            :key="item.name"
                            :label="item.name"
                            :value="item.name">
                        </el-option>
                    </el-select>
                    <el-input v-model="key" style="width: 48%;" placeholder="搜索关键字" prefix-icon="el-icon-search" :clearable="true"></el-input>
                </div>
            </div>

            <!-- 好友列表 -->
            <div class="friendList">
                <div class="item flex align_center" v-for="(item, index) in friendList" :key="index" @click="selectFun(item)">
                    <img src="../../assets/user.png" style="width: 44px; height: 44px; border-radius: 50%">
                    <div class="flex" style="height: 34px; justify-content: space-between; flex-direction: column; padding-left: 5px; flex: 1">
                        <div class="name">{{ item.name }}</div>
                        <div class="message line-1">{{item.message}}</div>
                    </div>
                    <div class="flex" style="height: 40px; justify-content: space-between; flex-direction: column; align-items: end;">
                        <div class="time">{{item.time}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="selectedVue">
            <div class="label">已选择群发对象</div>
            <div class="inner">
                <div class="item flex align_center" v-for="(item, index) in selectList" :key="index" @click="removeFun(item)">
                    <img src="../../assets/user.png" style="width: 44px; height: 44px; border-radius: 50%">
                    <div class="name flex_1">{{item.name}}</div>
                    <span class="el-icon-close icon"></span>
                </div>
            </div>
        </div>
        <div class="sendContent flex_1">
            <textarea v-model="message"></textarea>
            <div class="botVue flex_center align_center">
                <div class="send">发送</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            key: "",
            message: "",
            options: [],
            robotName: "",
            replyType: "",
            replyTypes: [{ name: '开启' }, { name: '关闭' }],
            selectList: [],
            friendList: [
                {
                    logo: "../../assets/user.png",
                    name: "会飞的猪",
                    message: "多少钱",
                    time: "13:14"
                },
                {
                    logo: "../../assets/user.png",
                    name: "会飞的西红柿",
                    message: "多少钱",
                    time: "13:14"
                },
                {
                    logo: "../../assets/user.png",
                    name: "会飞的香蕉",
                    message: "多少钱",
                    time: "13:14"
                }
            ]
        }
    },
    methods: {
        selectFun(item){
            if(JSON.stringify(this.selectList).includes(JSON.stringify(item))) return
            this.selectList.unshift(item)
            console.log(this.selectList)
        },
        removeFun(item){
            this.selectList = this.selectList.filter(o=>{
                return o.name!=item.name
            })
        }
    }
}
</script>


<style lang="less" scoped>
.mass_textingPage {
    width: 100%;
    height: 100%;
    background: #f5f5f5;
    .friendVue {
        width: 380px;
        height: 100%;
        background: #fff;
        width: 380px;
        height: 100%;
        background: #fff;
        .selectVue {
            width: 100%;
            padding: 20px 20px 10px;
        }    
        .friendList {
            width: 100%;
            height: calc(100% - 120px);
            overflow: scroll;
            .item {
                width: 100%;
                height: 60px;
                border-bottom: 1px solid #f5f5f5;
                padding: 0 15px;
                cursor: pointer;
                .name {
                        color: #111;
                        font-weight: 600;
                        font-size: 13px;
                }
                .message, .time {
                    color: #AAA;
                    font-size: 13px;
                }
            }
            .item:hover {
                background: #f5f5f5;
            }
        }    
        .friendList::-webkit-scrollbar {
            width: 0;
            height: 0;
            background-color: transparent;
        }   
    }
    .selectedVue {
        width: 380px;
        height: 100%;
        background: #fff; 
        margin-left: 15px;
        .label {
            width: 100%;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #242424;
            font-weight: 600;
            border-bottom: 1px solid #f5f5f5;
        }
        .inner {
            width: 100%;
            height: calc(100% - 60px);
            overflow: scroll;
            .item {
                width: 100%;
                height: 60px;
                border-bottom: 1px solid #f5f5f5;
                padding: 0 15px;
                cursor: pointer;
                .name {
                    color: #111;
                    font-weight: 600;
                    font-size: 13px;
                    padding-left: 5px;
                }
                .icon {
                    font-size: 18px;
                    color: #AAA;
                }
            }
        }
        .inner::-webkit-scrollbar {
            width: 0;
            height: 0;
            background-color: transparent;
        }   
    }
    .sendContent {
        height: 100%;
        background: #fff; 
        margin-left: 15px;
        padding: 15px 15px 0;
        textarea {
            width: 100%;
            height: calc(100% - 100px);
            border: 1px solid #f5f5f5;
            border-radius: 5px;
            resize: none;
        }
        .botVue {
            width: 100%;
            height: 100px;
            .send {
                width: 50%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                background: #0147fd;
                color: #fff;
                border-radius: 8px;
                cursor: pointer;
            } 
        }
    }
}
</style>